$--white: #fff;
$--black: #000;

$--main-color: #303133;
$--cont-color: #606266;
$--tips-color: #909399;
$--light-color: #c0c4cc;
$--border-color: #e4e7ed;
$--bg-color: #f3f4f6;

$--type-primary: #409eff;
$--type-primary-disabled: #b1d7ff;
$--type-primary-dark: #428ddb;
$--type-primary-light: #e8f3ff;

$--type-success: #67c23a;
$--type-success-disabled: #c1e6ae;
$--type-success-dark: #61aa3d;
$--type-success-light: #edf8e7;

$--type-warning: #e6a23c;
$--type-warning-disabled: #f5d9af;
$--type-warning-dark: #d2963e;
$--type-warning-light: #fcf4e8;

$--type-danger: #f56c6c;
$--type-danger-disabled: #fbc3c3;
$--type-danger-dark: #db6767;
$--type-danger-light: #feeded;

$--type-error: #ff0000;
$--type-error-disabled: #ff9696;
$--type-error-dark: #d90008;
$--type-error-light: #ffe0e0;

$--type-info: #909399;
$--type-info-disabled: #c8c9cc;
$--type-info-dark: #82848a;
$--type-info-light: #f4f4f5;


/*--------- 子元素垂直/水平居中对齐（父元素需设定position: relative） START ---------*/
@mixin center($width:null, $height:null) {
    position: absolute;
    top: 50%;
    left: 50%;
    @if $width and $height {
        width: $width;
        height: $height;
        margin: -($height / 2) #{0 0} -($width / 2);
    }
    @else if not $width and not $height {
        transform: translate(-50%, -50%);
    }
    @else if not $width {
        height: $height;
        margin-top: -(height / 2);
        transform: translateX(-50%);
    }
    @else {
        width: $width;
        margin-top: -(width / 2);
        transform: translateY(-50%);
    }
}
/*--------- 子元素垂直/水平居中对齐 END ---------*/

/*--------- flex START ---------*/
@mixin flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
@mixin flex-v {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@mixin flex-col-c {
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}
@mixin flex-col-t {
    -webkit-align-items: start;
    -moz-align-items: start;
    align-items: flex-start;
}
@mixin flex-col-b {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
@mixin flex-row-c {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@mixin flex-row-l {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
@mixin flex-row-r {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
@mixin flex-row-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@mixin flex-row-round {
    -webkit-box-pack: distribute;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
@mixin flex-self-t {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
@mixin flex-self-c {
    align-self: center;
}
@mixin flex-self-b {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

@mixin flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
@mixin flex-2 {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
}
@mixin flex-3 {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
}
@mixin flex-wrap {
    flex-wrap: wrap;
}
@mixin flex-nowrap {
    flex-wrap: nowrap;
}
@mixin flex-shrink {
    flex-shrink: 0;
}
/*--------- flex END ---------*/


@mixin scrollbar {
    $bar-width: 10px;
    $bar-radius: 0;
    $bar-shadow: 20px;

    &::-webkit-scrollbar {
        width: $bar-width;
        margin: 0 auto;
    }
    &::-webkit-scrollbar-track {
        // 外层轨道
        box-shadow: 0 0 $bar-shadow #f2f2f2 inset;
        border-radius: 0;
    }
    &::-webkit-scrollbar-thumb {
        // 拖动条
        box-shadow: 0 0 $bar-shadow #b4bbc5 inset;
        border-radius: $bar-radius;
        border: solid transparent;
        border-width: 2px 1px 2px 2px;

        &:hover {
            box-shadow: 0 0 $bar-shadow #909090 inset;
        }
    }
}